<template>
  <div class="chart-wrapper" :class="size">
    <div class="main-table-wrap">
      <div class="theader">
        <span class="span">班次</span>
        <span class="span">发车时间</span>
        <span class="span">预计内容</span>
        <span class="span">预警时间</span>
      </div>
      <vue-seamless-scroll :data="data" class="scroll" :class-option="defaultOption">
        <div v-for="item in data" :key="item.id" class="item">
          <span class="span" v-text="item.name"></span>
          <span class="span" v-text="item.origin_time"></span>
          <span class="span" v-text="item.alarm_des"></span>
          <span class="span" v-text="item.alarm_date"></span>
        </div>
      </vue-seamless-scroll>
    </div>
  </div>
</template>

<script>
import portal from '@/api/portal'

export default {
  name: 'CommonTable',
  props: ['size'],
  data () {
    return {
      data: [],
      defaultOption: {
        step: 0.4, // 数值越大速度滚动越快
        limitMoveNum: 1, // 开始无缝滚动的数据量 this.dataList.length
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 0, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
      },
      params: {
        page: 1,
        form_to: '',
        start_time: this.$moment().subtract(2, 'days').startOf('days').format('YYYY-MM-DD'),
        end_time: this.$moment().format('YYYY-MM-DD'),
        type: null
      }
    }
  },
  computed: {
    defaultOption1 () {
      return {
        step: 0.4, // 数值越大速度滚动越快
        limitMoveNum: 2, // 开始无缝滚动的数据量 this.dataList.length
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 0, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
      }
    }
  },
  mounted () {
    this.getBusYujing()
    this.timer = setInterval(() => {
      this.getBusYujing()
    }, 3 * 10000)
  },
  destroyed () {
    if (this.timer) {
      clearInterval(this.timer)
      this.timer = null
    }
  },
  watch: {
  },
  methods: {
    async getBusYujing () {
      this.loading = true
      const result = await portal.getBusYujing(this.params)
      if (result.data) {
        this.data = result.data
        this.params.total = result.data.total
        this.loading = false
      }
    }
  },
  beforeDestroy () {
  }
}
</script>

<style scoped lang="scss">
.chart-wrapper {
  height: calc((100vh - 60px) / 3 - 18px);
  position: relative;
  display: block;
  .main-table-wrap {
    position: relative;
    top: 10px;
    padding: 0 0 15px 0;
    width: 95%;
    height: 75%;
    overflow-y: auto;
    margin: auto;
    .theader {
      background-color: rgb(2, 23, 97, 1);
      color: #cccccc;
      font-size: 14px;
      width: 100%;
      border-radius: 10px;
      display: inline-flex;
      height: 30px;
      line-height: 30px;
      position: relative;
      z-index: 999999;
      span {
        text-align: center;
        flex: 1;
      }
    }
    .el-table, .el-table__expanded-cell {
      &:before {
        display: none;
      }
      background: rgba(255, 255,255, 0) !important;
      :deep(tr) {
        background: rgba(255, 255,255, 0) !important;
        th, td {
          background: rgba(255, 255,255, 0) !important;
          color: #2b85e7;
          border: none !important;
          line-height: 12px;
        }
      }
      .el-table__empty-text {
        color: #2b85e7;
      }
    }
    .scroll {
      height: 30px;
    }
    .item {
      display: inline-flex;
      height: 30px;
      width: 100%;
      font-size: 13px;
      color: #2b85e7;
      .span {
        flex: 1;
        text-align: center;
        list-style: none;
        margin: 0 auto;
        padding: 0 16px;
      }
    }
  }
}

</style>
